<template>
	<div>
		<el-card class="layout-search-card mb-4" shadow="never" :body-style="{ paddingBottom: '0' }">
			<el-form :model="state.queryParams" ref="queryForm" :inline="true">
				<el-form-item label="文章标题：">
					<el-input v-model="state.queryParams.title" placeholder="请输入文章标题" class="w-180"> </el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-select class="w-[150px]" v-model="state.queryParams.status">
						<el-option label="全部" value="" />
						<el-option label="显示" value="1" />
						<el-option label="隐藏" value="0" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button-group>
						<el-button type="primary" icon="ele-Search" @click="searchTable"> 查询 </el-button>
						<el-button icon="ele-Refresh" @click="resetQuery" class="ml15 mr15"> 重置 </el-button>
					</el-button-group>
					<fileExport :fetchFun="articleExport" :params="state.queryParams" />
					<fileImport
						:params="{}"
						:templateUrl="getUrl('resource/admin/excel/文章表导入示例.xlsx')"
						:fetchFun="articleImport"
						:maxSize="30"
						tip="请上传小于或等于 30M 的 .xls, .xlsx 格式文件"
						@success="getTableList"
					/>
				</el-form-item>
			</el-form>
		</el-card>
		<el-container>
			<el-aside width="240px">
				<el-card class="layout-table-card h-[100%] !border-r-0" shadow="never">
					<el-input placeholder="请输入栏目名称" v-model="cateDate.queryParams.name" class="mb-4" clearable @keyup.enter="getCateList">
						<template #append>
							<el-button @click="getCateList">
								<template #icon>
									<el-icon class="el-input__icon"><ele-Search /></el-icon>
								</template>
							</el-button>
						</template>
					</el-input>
					<el-tree
						ref="cateTreeRef"
						class="cate-tree-box"
						node-key="id"
						:data="cateDate.tableList"
						:props="{ label: 'name' }"
						:current-node-key="state.queryParams.cate_id"
						:highlight-current="true"
						:expand-on-click-node="false"
						@node-click="cateClick"
					></el-tree>
				</el-card>
			</el-aside>
			<el-main class="!p-0">
				<el-card class="layout-table-card" shadow="never">
					<router-link :to="{ path: '/cms/article/edit' }">
						<el-button size="default" v-auth="'cms/article/add'" type="primary" class="mb-4 mr-[15px]"> 添加文章 </el-button>
					</router-link>
					<el-button type="danger" v-auth="'cms/article/delete'" class="mb-4" :disabled="!selectData.length" @click="handleDelete(selectData)">删除</el-button>
					<el-table :data="state.tableList" v-loading="state.loading" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55" />
						<el-table-column prop="id" label="ID" width="80" />
						<el-table-column prop="title" label="文章标题" show-overflow-tooltip></el-table-column>
						<el-table-column label="文章封面" width="150">
							<template #default="{ row }">
								<el-image
									class="h-[60px] flex items-center justify-center"
									:src="row.image"
									preview-teleported="true"
									:preview-src-list="[row.image]"
									fit="contain"
								/>
							</template>
						</el-table-column>
						<el-table-column prop="cate_name" label="栏目" show-overflow-tooltip></el-table-column>
						<el-table-column prop="hits" label="点击量" show-overflow-tooltip></el-table-column>
						<el-table-column prop="status" label="状态" show-overflow-tooltip>
							<template #default="{ row }">
								<el-switch
									v-model="row.status"
									@change="handleUpdateStatus(row)"
									inline-prompt
									:active-value="1"
									:inactive-value="0"
									active-text="显示"
									inactive-text="隐藏"
								/>
							</template>
						</el-table-column>
						<el-table-column prop="create_time" label="创建时间" show-overflow-tooltip></el-table-column>
						<el-table-column label="操作" width="100" fixed="right">
							<template #default="{ row }">
								<el-button size="small" v-auth="'cms/article/edit'" text type="primary" @click="handleEdit(row)">编辑</el-button>
								<el-button size="small" v-auth="'cms/article/delete'" text type="primary" @click="handleDelete(row.id)">删除</el-button>
								<el-button size="small" text type="primary" @click="copyText(row.link)">复制链接</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="flex justify-end mt-4">
						<pagination v-model="state" @tableChange="getTableList" />
					</div>
				</el-card>
			</el-main>
		</el-container>
	</div>
</template>

<script setup lang="ts" name="cmsArticleList">
import { reactive, ref, onMounted } from 'vue';
import { messageBox } from '/@/utils/message';
import { articleList, articleUpdateStatus, articleDelete, articleImport, articleExport } from '/@/api/cms/article';
import { usePage } from '/@/hooks/usePage';
import { cateLists } from '/@/api/cms/cate';
import { getUrl } from '/@/utils/util';
import commonFunction from '/@/utils/commonFunction';
import { useRouter } from 'vue-router';

const { copyText } = commonFunction();

// 定义列表
const state = reactive<TableDataState>({
	loading: false,
	tableList: [],
	queryParams: {
		title: '',
		status: '',
		cate_id: '',
	},
	tableParams: {
		page_num: 1,
		page_limit: 15,
		page_total: 0 as any,
	},
});

const router = useRouter();

// 定义栏目
const cateDate = reactive({
	tableList: [],
	queryParams: {
		name: '',
	},
});

const cateTreeRef = ref(null);

// 栏目列表
const getCateList = async () => {
	const item: any[] = [
		{
			id: '',
			name: '全部',
		},
	];

	cateDate.tableList = await cateLists(cateDate.queryParams);
	cateDate.tableList.unshift(...item);
};

// 点击栏目
const cateClick = (data) => {
	state.queryParams.cate_id = data.id;
	getTableList();
};

const { getTableList, searchTable, resetQuery } = usePage({ tableData: state, apiData: articleList });

// 选中数据
const selectData = ref<any[]>([]);

// 选中回调事件
const handleSelectionChange = (val: any[]) => {
    selectData.value = val.map(({ id }) => id);
}

const handleEdit = async (row: any) => {
	router.push({ path: '/cms/article/edit', query: { id: row.id } });
};

const handleDelete = async (id: number | any[]) => {
	messageBox(`确定要删除文章吗？`).then(async () => {
		await articleDelete({ id: id });
		getTableList();
	});
};

const handleUpdateStatus = async (row: any) => {
	messageBox(`确定要修改文章状态吗？`).then(async () => {
		await articleUpdateStatus({ id: row.id, status: row.status });
		getTableList();
	});
};

onMounted(() => {
	getTableList();
	getCateList();
});
</script>
<style lang="scss">
.cate-tree-box .el-tree-node__content {
	height: 36px;
}
</style>
